<template>
<div>
<city-header></city-header>
<city-search :cities="allcities"></city-search>
<city-list 
 :hot="hotCities"
 :cities="allcities"
 :leter="letter"
 ></city-list>
<city-Alphabet :cities="allcities" @change="handleLetter"></city-Alphabet>
</div>
</template>

<script>
import CityHeader from "./components/header"
import CitySearch from "./components/search"
import CityList from "./components/list"
import CityAlphabet from "./components/Alphabet"
import axios from "axios"
export default {
 name:"city",
 components:{
   CityHeader,
   CitySearch,
   CityList,
  CityAlphabet
 },
 data(){
   return{
      allcities:{},
      hotCities:[],
      letter:""
   }
 },
 methods:{
   getCityInfo(){
     axios.get('/api/city.json')
     .then(this.handleGetCityInfoSucc)
   },
   handleGetCityInfoSucc(res){
     res=res.data 
     if(res.ret&&res.data){
        const data=res.data
        this.allcities=data.cities
        this.hotCities=data.hotCities
     }
   },
   handleLetter(letter){
    this.letter=letter
   }
 },
 mounted(){
    this.getCityInfo()
 }
}
</script>
<style lang="stylus" scoped>
 
</style>